<template>
    <div class="father">
      <h1>具名插槽：slotFather组件</h1>

      <!-- 第一个child组件 -->
      <Child>
        <!-- v-slot只能写在template标签和组件标签上 -->
         <!-- 这里是放到了slotone的插槽里 -->
        <template v-slot:slotOne>
          <h1>第一个组件传一个h1</h1>
        </template>
      </Child>

      <!-- 第二个child组件 -->
      <!-- 这里是放到了默认插槽里 -->
      <Child>
        <input type="text" value="第二个组件传一个input">
      </Child>

      <!-- 第三个child组件 -->
      <!-- 这里是放到了slotone的插槽里，用的是”v-slot:“的简写 -->
      <Child>
        <template #slotOne>
          <button>第三个组件传一个button</button>
        </template>
      </Child>
    </div>
  </template>
  
  <script lang="ts" setup>
  import Child from './Child.vue'
  </script>
  
  <style scoped>
    input{
      width: 300px;
      height: 40px;
      padding: 10px;
      font-size: 20px;
    }
  </style>